<template>
  <div class="login">
    <p class="right-login-code" @click="codeLogin">扫码登录></p>
    <p class="login-title">登录{{productName}}IM</p>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="mobile">
        <el-input class="mobile" v-model="form.mobile" placeholder="请输入手机号">
          <el-select class="select" slot="prepend" placeholder="请选择"
          v-model="form.dialCode"
          filterable :filter-method='codeSearch' @change="codeSearch('')">
            <el-option
              v-for="item in this.countryCodes"
              :key="item.name"
              :label="item.tel"
              :value="item.tel"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                {{
                `+${item.tel}`
                }}
              </span>
            </el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item prop="userPassword">
        <el-input
          v-model="form.userPassword"
          type="password"
          class="password"
          placeholder="请输入登陆密码"
        />
      </el-form-item>
    </el-form>
    <el-button class="login-button" round @click="userLogin">登&nbsp;&nbsp;录</el-button>
    <!-- <el-button type="text" @click="load" class="login-remember">点击下载APP</el-button> -->
  </div>
</template>

<script>
import { AesEncrypt } from '../../js/utils.js'
// import countryCodes from '../../utils/countryCodes'
import localCountryCodes from '../../utils/tel_code.json'
import store from 'store2'
import { Login } from '../../api/User.js'
import { mapState } from 'vuex'

export default {
  data: function () {
    return {
      form: {
        dialCode: '86',
        mobile: '',
        userPassword: ''
      },
      rules: {
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        userPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      remember: false,
      countryCodes: []
    }
  },
  computed: {
    ...mapState({
      productName: state => state.settings.productName,
      version: state => state.settings.version
    })
  },
  created () {
    this.codeSearch()
  },
  methods: {
    // 登录接口
    userLogin () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) {
          return false
        }
        // AES 加密
        const password = AesEncrypt(this.form.userPassword)
        const res = await Login({
          mobile: this.form.mobile,
          password,
          dialCode: this.form.dialCode
        })
        if (res.status !== 200) {
          this.$message.error('账号密码错误')
        } else {
          if (this.remember) {
            store.setAll({ aillo_token: res.data.token, aillo_name: res.data.name, aillo_avatar: res.data.avatar, aillo_introduce: res.data.introduce })
          } else {
            sessionStorage.setItem('aillo_token', res.data.token)
            sessionStorage.setItem('aillo_name', res.data.name)
            sessionStorage.setItem('aillo_id', res.data.id)
            sessionStorage.setItem('aillo_avatar', res.data.avatar)
            sessionStorage.setItem('aillo_introduce', res.data.introduce)
            sessionStorage.setItem('aillo_region', res.data.region)
            sessionStorage.setItem('aillo_uid', res.data.uid)
            sessionStorage.setItem('aillo_dialCode', res.data.dialCode)
            sessionStorage.setItem('aillo_mobile', res.data.mobile)
            sessionStorage.setItem('aillo_sex', res.data.sex)
          }
          this.$router.push('/home')
        }
      })
    },
    codeLogin () {
      this.$emit('onChangeLodeStatus', 2)
    },
    // 下载app
    load () {
      window.location.href = 'https://dl.aillo.cc/'
    },
    codeSearch (e = '') {
      // 存在搜索条件，返回搜索结果，否则返回全部
      const _codeSearch = e.trim()
      let result = localCountryCodes
      if (_codeSearch !== '') {
        const reg = new RegExp(_codeSearch)
        result = localCountryCodes.filter(i => {
          if (reg.test(i.tel) || reg.test(i.name)) return true
        })
      }
      this.countryCodes = result
    }
  }
}
</script>

<style lang="scss">
body {
  background: #666666;
}
.login {
  width: 297px;
  height: 401px;
  background: rgba(255, 255, 255, 1);
  border-radius: 9px;
  text-align: center;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .el-form-item__error {
    left: 33px !important;
  }
  .el-checkbox__inner {
    border-radius: 100px !important;
  }
  .el-input__inner {
    border: none !important;
    border-bottom: 1px solid #dcdfe6 !important;
  }
  .el-input--suffix {
    background-color: white;
    margin-top: -41px;
  }
  .el-input-group__prepend {
    border: none !important;
  }
  .login-title {
    margin-top: 55px;
    font-size: 22px;
    font-weight: 500;
  }
  .right-login-code {
    color: #3478f5;
    text-align: right;
    margin-right: 20px;
    margin-top: 20px;
    font-size: 14px;
    cursor: pointer;
  }
  .mobile {
    width: 237px;
    margin-top: 47px;
    .el-input__inner {
      color: black !important;
    }
    .select {
      width: 80px;
    }
  }
  .password {
    // margin-top: 32px;
    width: 237px;
  }
  .login-button {
    width: 237px;
    height: 40px;
    margin-top: 35px;
    background-color: #3478f5;
    font-size: 14px;
    font-weight: 400;
    color: white;
    margin-top: 3px;
  }
  .login-remember {
    margin-top: 10px;
    font-size: 14px;
  }
}
</style>
